<template>
    <div style="overflow-y: auto;">
        <div v-bind:key="item" v-for="(item, index) in lst.list" style="width: 100%;position: relative;" :style="{
            backgroundColor: (() => {
                if (index % 4 == 0) return 'rgb(255,255,255)'
                if (index % 4 == 1) return 'rgb(245,245,245)'
                if (index % 4 == 2) return 'rgb(235,235,235)'
                if (index % 4 == 3) return 'rgb(245,245,245)'
            })()
        }">
            <div class="blueHover" style="padding: 12px 12px;">
            <div @click="() => {
                lst.callBack({
                    op: 'titleClick',
                    item
                })
            }"
                style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;">

            </div>
                <flexBox style="width: 100%;height: 100%;" flex-direction="column">
                    <flexBox style="width: 100%;font-size: 16px" gap="16px" >
                        <flexBox gap="8px" style="width: 100%;text-align: left;" justify-content="flex-start" >
                            <span style="color:#333;cursor:pointer;position: relative;z-index: 100;">
                                <cIcon @click="() => {
                                    try {
                                        lst.callBack({
                                            op: 'select',
                                            item
                                        })
                                    } catch (e) {
                                        console.log(e)
                                    }
                                }" style="color: gray" v-if="!item.selected && lst.enableSelect" name="unselected">
                                </cIcon>
                                <cIcon @click="() => {
                                    try {
                                        lst.callBack({
                                            op: 'unselect',
                                            item
                                        })
                                    } catch (e) {
                                        console.log(e)
                                    }
                                }" style="color: rgb(0,120,215)" v-if="item.selected && lst.enableSelect"
                                    name="selected">
                                </cIcon>
                            </span>
                            <span style="cursor:pointer;user-select:text;text-decoration: underline;" @click="() => {
                                lst.callBack({
                                    op: 'titleClick',
                                    item
                                })
                            }" v-html="item.title"></span>
                        </flexBox>
                        <flexBox style="float:right;width:100%;max-width:300px" gap="20px" justify-content="flex-start">
                            <span @click="() => {
                                try {
                                    lst.callBack({
                                        op: subItem.op,
                                        item
                                    })
                                } catch (e) {
                                    console.log(e)
                                }
                            }" style="cursor:pointer;position: relative;z-index: 100;" v-bind:key="subItem"
                                v-for="(subItem, index2) in item.operations" :title="subItem.tip">
                                <cIcon :color="subItem.color ? subItem.color : '#333'" :name="subItem.icon"></cIcon>
                            </span>
                        </flexBox>
                    </flexBox>
                    <div v-html="item.content"
                        style="width: 100%;word-break:break-all;margin-top:8px;font-size: 14px;user-select:text;line-height:1.5">

                    </div>
                </flexBox>
            </div>
        </div>
        <div v-if="lst.list && !lst.list.length"
            style="font-size: 14px;color: gray;padding: 8px;width: 100%;text-align: center;">
            列表为空
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue';
import flexBox from './flexBox.vue';
import cIcon from './cIcon.vue'

const props = defineProps({
    data: {
        type: Object,
        default: {}
    },
})

const lst = ref({})

watch(() => props.data, () => {
    lst.value = props.data
}, {
    deep: true
})

onMounted(async () => {
    lst.value = props.data
})
</script>

<style scoped></style>